<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV+CSS布局</title>
    <style type="text/css">
        #Container{
            width:1000px;
            margin:0 auto;/*设置整个容器在浏览器中水平居中*/
            background:#CF3;
        }
        /**/
        #Header{
            height:30px;
            background:dodgerblue;
            text-align: center;
            line-height: 30px;
            font-size: 25px;
        }
        #Header a{
            padding: 200px 40px;
            color: #000;
            text-decoration: none;
            font-weight: bold;
        }
        #logo{
            padding-left:250px;
            padding-top:20px;
            padding-bottom:50px;
        }
        #Content{
            overflow:auto;
            /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
            margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
            background:mediumblue;

        }
        #Content-Left{
            height:300px;
            width:200px;
            margin:5px;/*设置元素跟其他元素的距离为20像素*/
            float:left;/*设置浮动，实现多列效果*/
            background:blueviolet;
            position: absolute;
            bottom: 300px;
        }
        #Content-Left a{
            float: left;
            padding: 20px 40px;
            color: #000;
            text-decoration: none;
            font-weight: bold;
        }
        #Content-Main{
            height:250px;
            width:200px;
            margin:5px;/*设置元素跟其他元素的距离为20像素*/
            /*float:left;/*设置浮动，实现多列效果*/
            float:left;
            background:red;
            position: absolute;
            bottom: 20px;
        }
        #Content-Main b{
            float: left;
            padding: 20px 40px;
            color: #000;
            text-decoration: none;
            font-weight: bold;
        }
        /*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
        #Footer{
            width:1500px;
            height:40px;
            background:blue;
            margin-top:20px;
            /*position: absolute;
            bottom: -150px;*/
        }
        .Clear{
            clear:both;
        }
        div.bb{
            width: 1200px;;height: 200px;
            border: 1px solid red;
            margin:0px 300px;/*置顶，左右居中*/
        }
    </style>
</head>
<body>
<p id="Container">
    <p id="Header">
        <a href="#">链接</a>|
	    <a href="#">链接</a>|
        <a href="#">链接</a>|
	    <a href="#">链接</a>|
	    <a href="#">链接</a>
    </p>
    <p id="logo">
       <div class="bb">
           <img src="./image/1.jpg" width="200">
           <hr/>
       </div>
       <div class="bb">
           <img src="./image/4%20.jpg" width="200" height="150">
            <hr/>
       </div>
       <div class="bb">
           <img src="./image/5.jpg" width="200">
           <hr/>
       </div>
    </p>
    <p id="Content">
        <p id="Content-Left">
            <a href="#">菜单一</a>
            <a href="#">菜单二</a>
            <a href="#">菜单三</a>
            <a href="#">菜单四</a>
</p>
        <p id="Content-Main">
            <b href="#">菜单一</b>
            <b href="#">菜单二</b>
            <b href="#">菜单三</b>
            <b href="#">菜单四</b>
        </p>
    </p>
    <div class="Clear"><!--布局清除。--></p>
    <p id="Footer">底部导航栏</p>
    </div>
</p>
</body>
</html>